<script setup lang="ts">
  import { getTakeDrugMonitor } from '@/api/dashboard';
  import { queryList } from '@/api/organization/nursing-home';
  import { useForm } from '@/hooks/arco/useForm';
  import { useSelectOption } from '@/hooks/arco/useSelectOption';
  import { useSkeleton } from '@/hooks/arco/useSkeleton';
  import { ref, shallowRef, onUnmounted } from 'vue';

  const items = shallowRef([]); // 存储所有的项目
  const visibleItems = ref<any[]>([]); // 存储当前需要渲染的部分数据
  const batchSize = 50; // 每次渲染的数量
  let currentIndex = 0; // 当前渲染的起始索引

  let isAlive = true;

  onUnmounted(() => {
    isAlive = false;
  });

  // 分时渲染列表
  function renderList() {
    const nextBatch = items.value.slice(currentIndex, currentIndex + batchSize);
    visibleItems.value = visibleItems.value.concat(nextBatch);

    currentIndex += batchSize;

    if (!isAlive) {
      return;
    }

    // 如果还有更多数据，继续渲染
    if (currentIndex < items.value.length) {
      if ('requestIdleCallback' in window) {
        requestIdleCallback(renderList);
      } else {
        setTimeout(renderList, 0);
      }
    }
  }

  const drugMonitorView = useSkeleton({
    immediate: false,
    apiFun: getTakeDrugMonitor,
    onSuccess(data) {
      items.value = data;
      renderList();
    },
  });

  const form = useForm({
    state: {
      branchId: '',
      scheduleType: '',
    },
  });

  const reSearch = () => {
    drugMonitorView.execute({
      branchId: form.state.branchId || '',
      scheduleType: form.state.scheduleType,
    });
  };

  const branchSelect = useSelectOption({
    apiFun: queryList,
    fieldNames: {
      value: 'id',
      label: 'name',
    },
    onSuccess() {
      reSearch();
    },
  });

  const tagColor = {
    1: 'gray',
    2: 'arcoblue',
    3: 'green',
    4: 'red',
  };

  const getColor = (type: number) => {
    // @ts-ignore
    return tagColor[type] || 'gray';
  };
</script>

<template>
  <div class="col h-full">
    <a-form layout="inline" v-bind="form.bindProps">
      <a-form-item field="branchId" label="所选院区">
        <a-select
          v-model="form.state.branchId"
          class="w-[200px]"
          allow-clear
          v-bind="branchSelect.bindProps"
          @change="reSearch"
        />
      </a-form-item>
      <a-form-item field="time" label="所选时段">
        <dict-select
          v-model="form.state.scheduleType"
          class="w-[200px]"
          allow-clear
          type="MedSchedule"
          @change="reSearch"
        />
      </a-form-item>
    </a-form>
    <skeleton-view class="mt-3" v-bind="drugMonitorView.bindProps">
      <a-grid
        :cols="{ xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6 }"
        :col-gap="12"
        :row-gap="12"
      >
        <a-grid-item
          v-for="(item, index) in visibleItems"
          :key="index"
          :index="index"
        >
          <div :class="['card-item', `card-color-${item.monitorStatus}`]">
            <div class="flex card-title justify-between px-5 py-3">
              <span class="text-lg">
                {{ item.roomNo }}房间 {{ item.bedNo }}床
              </span>
              <a-badge
                v-if="item.monitorStatus === 4"
                status="danger"
                text="异常"
              />
              <a-badge
                v-else-if="item.monitorStatus === 3"
                status="success"
                text="已完成"
              />
              <a-badge v-else status="normal" text="--" />
            </div>
            <div class="px-5 py-3">
              <p>
                <span class="title">姓名：</span>
                <span class="value">{{ item.elderName }}</span>
              </p>
              <p>
                <span class="title">时段：</span>
                <span class="value">{{ item.schduleTypeLabel }}</span>
              </p>
            </div>
            <a-tag size="large" :color="getColor(item.monitorStatus)">
              {{ item.monitorStatusLabel }}
            </a-tag>
          </div>
        </a-grid-item>
      </a-grid>
    </skeleton-view>
  </div>
</template>

<style lang="less" scoped>
  .card-item {
    border: 1px solid var(--color-neutral-3);
    border-radius: var(--border-radius-small);
    background: var(--color-bg-2);
    display: flex;
    flex-direction: column;
    .card-title {
      border-bottom: 1px solid #e5e5e5;
    }
  }
  .card-color-1 {
    border-color: rgb(var(--gray-3));
    box-shadow: 0 1px 3px 0 rgb(var(--gray-1)),
      0 1px 2px -1px rgb(var(--gray-1));
  }

  .card-color-2 {
    border-color: rgb(var(--arcoblue-3));
    box-shadow: 0 1px 3px 0 rgb(var(--arcoblue-1)),
      0 1px 2px -1px rgb(var(--arcoblue-1));
  }

  .card-color-3 {
    border-color: rgb(var(--green-3));
    box-shadow: 0 1px 3px 0 rgb(var(--green-1)),
      0 1px 2px -1px rgb(var(--green-1));
  }

  .card-color-4 {
    border-color: rgb(var(--red-3));
    box-shadow: 0 1px 3px 0 rgb(var(--red-1)), 0 1px 2px -1px rgb(var(--red-1));
  }
</style>
